﻿ @{
    ViewData["Title"] = "仪表盘";
}

@section Styles{
    <!-- Plugin css -->
    <link href="~/assets/libs/fullcalendar/fullcalendar.min.css" rel="stylesheet" type="text/css" />

    <style>


        .fc-list-table .bg-primary {
            background-color: unset !important;
        }
    </style>
}


<!-- Start Content-->
<div class="container-fluid">

    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">

                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);"><i class="fa fa-map-marker-alt"></i></a></li>
                        <li class="breadcrumb-item"><a href="javascript: void(0);">仪表盘</a></li>
                        <li class="breadcrumb-item active">/</li>
                    </ol>
                </div>
                <h4 class="page-title">仪表盘</h4>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row">
        <div class="col-md-6 col-xl-3">
            <div class="card-box">
                <div class="row">
                    <div class="col-6">
                        <div class="avatar-sm bg-info rounded">
                            <i class="fe-aperture avatar-title font-22 text-white"></i>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-right">
                            <h3 class="text-dark my-1">$<span data-plugin="counterup">12,145</span></h3>
                            <p class="text-muted mb-1 text-truncate">Income status</p>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <h6 class="text-uppercase">Target <span class="float-right">60%</span></h6>
                    <div class="progress progress-sm m-0">
                        <div class="progress-bar bg-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                            <span class="sr-only">60% Complete</span>
                        </div>
                    </div>
                </div>
            </div> <!-- end card-box-->
        </div> <!-- end col -->

        <div class="col-md-6 col-xl-3">
            <div class="card-box">
                <div class="row">
                    <div class="col-6">
                        <div class="avatar-sm bg-primary rounded">
                            <i class="fe-shopping-cart avatar-title font-22 text-white"></i>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-right">
                            <h3 class="text-dark my-1"><span data-plugin="counterup">1576</span></h3>
                            <p class="text-muted mb-1 text-truncate">January's Sales</p>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <h6 class="text-uppercase">Target <span class="float-right">49%</span></h6>
                    <div class="progress progress-sm m-0">
                        <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="49" aria-valuemin="0" aria-valuemax="100" style="width: 49%">
                            <span class="sr-only">49% Complete</span>
                        </div>
                    </div>
                </div>
            </div> <!-- end card-box-->
        </div> <!-- end col -->

        <div class="col-md-6 col-xl-3">
            <div class="card-box">
                <div class="row">
                    <div class="col-6">
                        <div class="avatar-sm bg-info rounded">
                            <i class="fe-bar-chart-2 avatar-title font-22 text-white"></i>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-right">
                            <h3 class="text-dark my-1">$<span data-plugin="counterup">8947</span></h3>
                            <p class="text-muted mb-1 text-truncate">Payouts</p>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <h6 class="text-uppercase">Target <span class="float-right">18%</span></h6>
                    <div class="progress progress-sm m-0">
                        <div class="progress-bar bg-info" role="progressbar" aria-valuenow="18" aria-valuemin="0" aria-valuemax="100" style="width: 18%">
                            <span class="sr-only">18% Complete</span>
                        </div>
                    </div>
                </div>
            </div> <!-- end card-box-->
        </div> <!-- end col -->

        <div class="col-md-6 col-xl-3">
            <div class="card-box">
                <div class="row">
                    <div class="col-6">
                        <div class="avatar-sm bg-primary rounded">
                            <i class="fe-cpu avatar-title font-22 text-white"></i>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-right">
                            <h3 class="text-dark my-1"><span data-plugin="counterup">178</span></h3>
                            <p class="text-muted mb-1 text-truncate">Available Stores</p>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <h6 class="text-uppercase">Target <span class="float-right">74%</span></h6>
                    <div class="progress progress-sm m-0">
                        <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" style="width: 74%">
                            <span class="sr-only">74% Complete</span>
                        </div>
                    </div>
                </div>
            </div> <!-- end card-box-->
        </div> <!-- end col -->
    </div>
    <!-- end row -->

    <div class="row">
        <div class="col-xl-4">
            <!-- Portlet card -->
            <div class="card">
                <div class="card-body">
                    <div class="card-widgets">
                        <a href="javascript: void(0);" data-toggle="reload"><i class="mdi mdi-refresh"></i></a>
                        <a data-toggle="collapse" href="dashboard-2.html#cardCollpase1" role="button" aria-expanded="false" aria-controls="cardCollpase1"><i class="mdi mdi-minus"></i></a>
                        <a href="javascript: void(0);" data-toggle="remove"><i class="mdi mdi-close"></i></a>
                    </div>
                    <h4 class="header-title mb-0">Lifetime Sales</h4>

                    <div id="cardCollpase1" class="collapse pt-3 show">
                        <div class="text-center">
                            <div id="sparkline1"></div>

                            <div class="row mt-3">
                                <div class="col-4">
                                    <p class="text-muted font-15 mb-1 text-truncate">Target</p>
                                    <h4><i class="fe-arrow-down text-danger mr-1"></i>$7.8k</h4>
                                </div>
                                <div class="col-4">
                                    <p class="text-muted font-15 mb-1 text-truncate">Last week</p>
                                    <h4><i class="fe-arrow-up text-success mr-1"></i>$1.4k</h4>
                                </div>
                                <div class="col-4">
                                    <p class="text-muted font-15 mb-1 text-truncate">Last Month</p>
                                    <h4><i class="fe-arrow-down text-danger mr-1"></i>$9.8k</h4>
                                </div>
                            </div> <!-- end row -->

                        </div>
                    </div> <!-- collapsed end -->
                </div> <!-- end card-body -->
            </div> <!-- end card-->
        </div> <!-- end col-->

        <div class="col-xl-4">
            <div class="card">
                <div class="card-body">
                    <div class="card-widgets">
                        <a href="javascript: void(0);" data-toggle="reload"><i class="mdi mdi-refresh"></i></a>
                        <a data-toggle="collapse" href="dashboard-2.html#cardCollpase2" role="button" aria-expanded="false" aria-controls="cardCollpase2"><i class="mdi mdi-minus"></i></a>
                        <a href="javascript: void(0);" data-toggle="remove"><i class="mdi mdi-close"></i></a>
                    </div>
                    <h4 class="header-title mb-0">Income Amounts</h4>

                    <div id="cardCollpase2" class="collapse pt-3 show">
                        <div class="text-center">
                            <div id="sparkline2"></div>
                            <div class="row mt-3">
                                <div class="col-4">
                                    <p class="text-muted font-15 mb-1 text-truncate">Target</p>
                                    <h4><i class="fe-arrow-up text-success mr-1"></i>641</h4>
                                </div>
                                <div class="col-4">
                                    <p class="text-muted font-15 mb-1 text-truncate">Last week</p>
                                    <h4><i class="fe-arrow-down text-danger mr-1"></i>234</h4>
                                </div>
                                <div class="col-4">
                                    <p class="text-muted font-15 mb-1 text-truncate">Last Month</p>
                                    <h4><i class="fe-arrow-up text-success mr-1"></i>3201</h4>
                                </div>
                            </div> <!-- end row -->
                        </div>
                    </div> <!-- collapsed end -->
                </div> <!-- end card-body -->
            </div> <!-- end card-->
        </div> <!-- end col-->

        <div class="col-xl-4">
            <div class="card">
                <div class="card-body">
                    <div class="card-widgets">
                        <a href="javascript: void(0);" data-toggle="reload"><i class="mdi mdi-refresh"></i></a>
                        <a data-toggle="collapse" href="dashboard-2.html#cardCollpase3" role="button" aria-expanded="false" aria-controls="cardCollpase3"><i class="mdi mdi-minus"></i></a>
                        <a href="javascript: void(0);" data-toggle="remove"><i class="mdi mdi-close"></i></a>
                    </div>
                    <h4 class="header-title mb-0">Total Users</h4>

                    <div id="cardCollpase3" class="collapse pt-3 show">
                        <div class="text-center">
                            <div id="sparkline3"></div>
                            <div class="row mt-3">
                                <div class="col-4">
                                    <p class="text-muted font-15 mb-1 text-truncate">Target</p>
                                    <h4><i class="fe-arrow-down text-danger mr-1"></i>18k</h4>
                                </div>
                                <div class="col-4">
                                    <p class="text-muted font-15 mb-1 text-truncate">Last week</p>
                                    <h4><i class="fe-arrow-up text-success mr-1"></i>3.25k</h4>
                                </div>
                                <div class="col-4">
                                    <p class="text-muted font-15 mb-1 text-truncate">Last Month</p>
                                    <h4><i class="fe-arrow-up text-success mr-1"></i>28k</h4>
                                </div>
                            </div> <!-- end row -->
                        </div>
                    </div> <!-- collapsed end -->
                </div> <!-- end card-body -->
            </div> <!-- end card-->
        </div> <!-- end col-->
    </div>
    <!-- end row -->

    <div class="row">
        <div class="col-xl-6">
            <div class="card">
                <div class="card-body">
                    <div class="card-widgets">
                        <a href="javascript: void(0);" data-toggle="reload"><i class="mdi mdi-refresh"></i></a>
                        <a data-toggle="collapse" href="dashboard-2.html#cardCollpase4" role="button" aria-expanded="false" aria-controls="cardCollpase4"><i class="mdi mdi-minus"></i></a>
                        <a href="javascript: void(0);" data-toggle="remove"><i class="mdi mdi-close"></i></a>
                    </div>
                    <h4 class="header-title mb-0">Revenue By Location</h4>

                    <div id="cardCollpase4" class="collapse pt-3 show">
                        <div id="world-map-markers" style="height: 415px"></div>
                    </div> <!-- collapsed end -->
                </div> <!-- end card-body -->
            </div> <!-- end card-->
        </div> <!-- end col -->

        <div class="col-xl-6">
            <div class="card">
                <div class="card-body">
                    <div class="card-widgets">
                        <a href="javascript: void(0);" data-toggle="reload"><i class="mdi mdi-refresh"></i></a>
                        <a data-toggle="collapse" href="dashboard-2.html#cardCollpase5" role="button" aria-expanded="false" aria-controls="cardCollpase5"><i class="mdi mdi-minus"></i></a>
                        <a href="javascript: void(0);" data-toggle="remove"><i class="mdi mdi-close"></i></a>
                    </div>
                    <h4 class="header-title mb-0">Top Selling Products</h4>

                    <div id="cardCollpase5" class="collapse pt-3 show">
                        <div class="table-responsive">
                            <table class="table table-hover table-centered mb-0">
                                <thead>
                                    <tr>
                                        <th>Product Name</th>
                                        <th>Price</th>
                                        <th>Quantity</th>
                                        <th>Amount</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>ASOS Ridley High Waist</td>
                                        <td>$79.49</td>
                                        <td>82</td>
                                        <td>$6,518.18</td>
                                    </tr>
                                    <tr>
                                        <td>Marco Lightweight Shirt</td>
                                        <td>$128.50</td>
                                        <td>37</td>
                                        <td>$4,754.50</td>
                                    </tr>
                                    <tr>
                                        <td>Half Sleeve Shirt</td>
                                        <td>$39.99</td>
                                        <td>64</td>
                                        <td>$2,559.36</td>
                                    </tr>
                                    <tr>
                                        <td>Lightweight Jacket</td>
                                        <td>$20.00</td>
                                        <td>184</td>
                                        <td>$3,680.00</td>
                                    </tr>
                                    <tr>
                                        <td>Marco Shoes</td>
                                        <td>$28.49</td>
                                        <td>69</td>
                                        <td>$1,965.81</td>
                                    </tr>
                                    <tr>
                                        <td>ASOS Ridley High Waist</td>
                                        <td>$79.49</td>
                                        <td>82</td>
                                        <td>$6,518.18</td>
                                    </tr>
                                    <tr>
                                        <td>Half Sleeve Shirt</td>
                                        <td>$39.99</td>
                                        <td>64</td>
                                        <td>$2,559.36</td>
                                    </tr>
                                    <tr>
                                        <td>Lightweight Jacket</td>
                                        <td>$20.00</td>
                                        <td>184</td>
                                        <td>$3,680.00</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div> <!-- end table responsive-->
                    </div> <!-- collapsed end -->
                </div> <!-- end card-body -->
            </div> <!-- end card-->
        </div> <!-- end col -->
    </div>

</div> <!-- container -->
<!-- Content Header (Page header) -->


@section scripts{
    <script src="~/assets/libs/moment/moment.min.js"></script>

    <!-- Plugins js-->
    <script src="~/assets/libs/jquery-sparkline/jquery.sparkline.min.js"></script>
    <script src="~/assets/libs/jquery-vectormap/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="~/assets/libs/jquery-vectormap/jquery-jvectormap-world-mill-en.js"></script>




    <script>
        $(document).ready(function () {
            var n, e = function () {
                $("#sparkline1").sparkline([0, 23, 43, 35, 44, 45, 56, 37, 40], {
                    type: "line",
                    width: "100%",
                    height: "220",
                    chartRangeMax: 50,
                    lineColor: "#6658dd",
                    fillColor: "rgba(102, 88, 221, 0.3)",
                    highlightLineColor: "rgba(0,0,0,.1)",
                    highlightSpotColor: "rgba(0,0,0,.2)",
                    maxSpotColor: !1,
                    minSpotColor: !1,
                    spotColor: !1,
                    lineWidth: 1
                }),
                    $("#sparkline1").sparkline([25, 23, 26, 24, 25, 32, 30, 24, 19], {
                        type: "line",
                        width: "100%",
                        height: "220",
                        chartRangeMax: 40,
                        lineColor: "#4fc6e1",
                        fillColor: "rgba(79, 198, 225, 0.3)",
                        composite: !0,
                        highlightLineColor: "rgba(0,0,0,.1)",
                        highlightSpotColor: "rgba(0,0,0,.2)",
                        maxSpotColor: !1,
                        minSpotColor: !1,
                        spotColor: !1,
                        lineWidth: 1
                    }),
                    $("#sparkline2").sparkline([3, 6, 7, 8, 6, 4, 7, 10, 12, 7, 4, 9, 12, 13, 11, 12], {
                        type: "bar",
                        height: "220",
                        barWidth: "10",
                        barSpacing: "3",
                        barColor: "#00acc1"
                    }),
                    $("#sparkline3").sparkline([20, 40, 30, 10], {
                        type: "pie",
                        width: "220",
                        height: "220",
                        sliceColors: ["#00acc1", "#7e57c2", "#e3eaef", "#fd7e14"]
                    })
            };
            e(),
                $(window).resize(function (a) {
                    clearTimeout(n),
                        n = setTimeout(function () {
                            e()
                        },
                            300)
                })
        }),
            $("#world-map-markers").vectorMap({
                map: "world_mill_en",
                normalizeFunction: "polynomial",
                hoverOpacity: .7,
                hoverColor: !1,
                regionStyle: {
                    initial: {
                        fill: "#ced4da"
                    }
                },
                markerStyle: {
                    initial: {
                        r: 9,
                        fill: "#6658dd",
                        "fill-opacity": .9,
                        stroke: "#fff",
                        "stroke-width": 7,
                        "stroke-opacity": .4
                    },
                    hover: {
                        stroke: "#fff",
                        "fill-opacity": 1,
                        "stroke-width": 1.5
                    }
                },
                backgroundColor: "transparent",
                markers: [{
                    latLng: [41.9, 12.45],
                    name: "Vatican City"
                },
                {
                    latLng: [43.73, 7.41],
                    name: "Monaco"
                },
                {
                    latLng: [- .52, 166.93],
                    name: "Nauru"
                },
                {
                    latLng: [- 8.51, 179.21],
                    name: "Tuvalu"
                },
                {
                    latLng: [43.93, 12.46],
                    name: "San Marino"
                },
                {
                    latLng: [47.14, 9.52],
                    name: "Liechtenstein"
                },
                {
                    latLng: [7.11, 171.06],
                    name: "Marshall Islands"
                },
                {
                    latLng: [17.3, -62.73],
                    name: "Saint Kitts and Nevis"
                },
                {
                    latLng: [3.2, 73.22],
                    name: "Maldives"
                },
                {
                    latLng: [35.88, 14.5],
                    name: "Malta"
                },
                {
                    latLng: [12.05, -61.75],
                    name: "Grenada"
                },
                {
                    latLng: [13.16, -61.23],
                    name: "Saint Vincent and the Grenadines"
                },
                {
                    latLng: [13.16, -59.55],
                    name: "Barbados"
                },
                {
                    latLng: [17.11, -61.85],
                    name: "Antigua and Barbuda"
                },
                {
                    latLng: [- 4.61, 55.45],
                    name: "Seychelles"
                },
                {
                    latLng: [7.35, 134.46],
                    name: "Palau"
                },
                {
                    latLng: [42.5, 1.51],
                    name: "Andorra"
                },
                {
                    latLng: [14.01, -60.98],
                    name: "Saint Lucia"
                },
                {
                    latLng: [6.91, 158.18],
                    name: "Federated States of Micronesia"
                },
                {
                    latLng: [1.3, 103.8],
                    name: "Singapore"
                },
                {
                    latLng: [.33, 6.73],
                    name: "SÃ£o TomÃ© and PrÃ­ncipe"
                }]
            });
    </script>
}



